
<template>
    <div class="demo">
        <h3>{{msg}}</h3>
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{updateAge}}</h3> 
    <button @click="add">修改年龄</button>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data() {
            return {
                msg: "乘风破浪会有时，直挂云帆济沧海！",
                updateAge: this.age
                }
            },
        // 第一种接收方式
        // props: ['name', 'age']

        // 第二种接收方式：限制类型
        // props: {
        //     name: String,
        //     age: Number
        // }

        // 第三种接收方式：限制类型，设置默认值，限制必要性
        props: {
            name: {
                Type: String,
                required: true
                },
            age: {
                Type: Number,
                default: 99
            }

        },
        // props是只读的, Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
        // 若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据.
        methods: {
            add(){
                this.updateAge++
            }
        },
        }
</script>
